@import './common';
@import './reset';
page{
    background:#F4F6FA;
}
.popup-swiper{
    background-color: transparent;
    .u-mode-center-box{
        background-color: transparent!important;
    }
    .transparent-swiper{
        swiper{
            background-color: transparent!important;
        }
    }
}
.search-sticky{
    background:#fff;padding:20rpx 0;
    .current{
        // color:$cyan;font-weight:bold;
        font-weight:bold;font-size:34rpx;position: relative;
        .name{position: relative;z-index:2;}
        &::after{
            content:'';position:absolute;left:0;bottom:0;z-index:1;width:100%;height:24rpx;background:$cyan;
        }
    }

}
.page-register-index{
    height: 100%;background:#fff;
    .card{
        background:$lightOrange;border:1rpx solid $orange;text-align:center;margin:30rpx 0;padding:30rpx;border-radius:8rpx;
        .price{color:$red;font-weight:bold;font-size:34rpx;}
        .day{color:$grey6;font-size:26rpx;}
    }
    .tips{
        color:$grey9;
    }

}
.page-home-index{
    .bg{
        height:378rpx;background: linear-gradient( 3deg, rgba(242,253,254,0) 0%, #F5FFF4 17%, #F7F9EA 64%, #DAFDEF 100%);
    }
    .search-bar{
        align-items:center;padding:30rpx 32rpx 0 32rpx;
        .city{
            display: flex;align-items: center;
        }
        .input{
            height:60rpx;background:#fff;border-radius: 160rpx 160rpx 160rpx 160rpx;padding:0 30rpx;line-height:60rpx;display: flex;justify-content: space-between;align-items:center;
            text{color:$grey9}
        }
    }
    .my-tabs{
        .scroll-block{
            white-space: nowrap;width:100%;
            .item{padding:10rpx 0;margin:0 30rpx;display: inline-block;font-size:30rpx;}
            .current{font-weight:bold;font-size:34rpx;position: relative;
                .name{position: relative;z-index:2;}
                &::after{
                    content:'';position:absolute;left:0;bottom:0;z-index:1;width:100%;height:24rpx;background:#67E5C2;
                }
            }
        }
    }
    .list{margin-bottom:30rpx;}
    .fly-card{
        margin: 0 30rpx;
        .item{
            margin-top:30rpx;border-radius: 12rpx 12rpx 12rpx 12rpx;
        }
        .thumb{
            width:204rpx;height:270rpx;
        }
        .content{
            &::after{display: none;}
        }
        .desc{
            line-height:48rpx;font-size:30rpx;
            .c-black{color:#333;}
        }
        .grey9{
            color:$grey9;font-size:26rpx;
        }
    }
}
.page-account{
    &-info{
        height:100%;background:#fff;
        .avatar{
            border:none;
            &::after{
                background:none;border:none;
            }
        }
    }
    &-bind{
        height:100%;background:#fff;
    }
}
.page-activity{
    &-detail{
        .fly-card{
            background:#fff;padding:32rpx 0;
            .title{font-size:44rpx;}
            .desc{
                line-height:48rpx;font-size:30rpx;
                .flex-between{
                    align-items: center;
                }
            }
        }
        .sign{
            padding:32rpx;margin-bottom:16rpx;background:#fff;
            .flex-between{align-items: center;margin-bottom:30rpx;}
            .flex-block{align-items:center;}
            .title{font-size:34rpx;font-weight:bold;}
            .num{font-size:30rpx;}
        }
        .scroll{
            white-space: nowrap;
		    width: 100%;
            .item{
                display: inline-block;
                width: 90rpx;
                height: 140rpx;
                text-align: center;
                font-size: 26rpx;
                &+.item{margin-left:30rpx;}
            }
        }
        .fly-bottom-bar{
            .content{
                padding:20rpx 30rpx;
            }
            .fl{
                text-align:center;color:$grey9;font-size:26rpx;
                .icon-share{padding:0 20rpx;position:relative;
                    .btn-share{position: absolute;left:0;top:0;width:100%;height:100%;opacity: 0;z-index:99;}
                }
                .icon-sign{padding:0 30rpx;}
            }
            .fr{
                border-radius:12rpx;overflow:hidden;
            }
            .btn{
                background:$lightCyan;color:$deepCyan;padding:16rpx 30rpx;box-sizing:border-box;width:230rpx;text-align:center;font-size:30rpx;
                &.deepCyan{
                    background:$deepCyan;color:#fff;
                }
            }
        }
    }
}
.page-my{
    &-index{
        .fly-card{
            background: linear-gradient( 180deg, #F5FFFD 0%, #F4F6FA 100%);
            .item{background:none;}
            .thumb{
                height:120rpx;width:120rpx;
            }
            .content{
                &::after{display: none;}
            }
            .banner{margin:0 30rpx;}
        }
        .intro{
            padding:0 30rpx 30rpx 30rpx;
        }
        .menu{
            background:#fff;border-radius:12rpx;overflow:hidden;
        }
        .nav{
            margin:0 -8rpx;
            .flex-between{
                background:#fff;border-radius:6rpx;overflow:hidden;margin-bottom:18rpx;padding:18rpx 30rpx;align-items: center;
                .title{
                    font-size: 30rpx;font-weight:bold;margin-left:20rpx;
                }
            }
        }
    }
}
.page-create{
    &-index{
        margin: 0 30rpx;
        .menu{
            margin:0 -8rpx;padding-top:30rpx;
            .text-center{
                padding:20rpx 0rpx;background:$lightCyan;color:$deepCyan;border-radius:12rpx;overflow:hidden;
                &.current{
                    background:$deepCyan;color:#fff;
                }
            }
        }
        .fly-title{margin:30rpx 0;font-size:34rpx;font-weight:bold;}
        .form-block{
            background:#fff;padding:0 30rpx;border-radius:12rpx;overflow: hidden;
        }
        .sign-tips{
            background:$lightCyan;color:$deepCyan;padding:18rpx;font-size:26rpx;border-radius:12rpx;margin-bottom:30rpx;
        }
        .fly-bottom-bar{
            height:200rpx;
            .content{
                bottom:calc(114rpx + var(--safe-area-inset-bottom));
                padding:20rpx 30rpx;shadow:0 0 8rpx rgba(0,0,0,0.3);
                .fl{
                    text-align: center;;width:160rpx;
                    u-image{display: inline-block;}
                }
                .fr{
                    flex:1;
                    .btn-deepCyan{width:100%;}
                }
            }
        }
    }
    &-draft{
        .fly-card{
            margin: 0 30rpx;
            .item{
                margin-top:30rpx;border-radius: 12rpx 12rpx 12rpx 12rpx;
            }
            .thumb{
                width:204rpx;height:270rpx;
            }
            .content{
                &::after{display: none;}
            }
            .desc{
                line-height:48rpx;font-size:30rpx;
                .c-black{color:#333;}
            }
            .grey9{
                color:$grey9;font-size:26rpx;
            }
        }
    }
}
.page-community{
    &-index{
        .menu{
            margin:0 16rpx;padding:30rpx 0 60rpx 0;
            .content{
                padding:40rpx 30rpx;background:#333;color:#fff;border-radius:16rpx;overflow:hidden;
                .title{
                    font-size:34rpx;font-weight:bold;
                }
            }
        }
        .album{  
            margin:0 30rpx;          
            .item{
                display:flex;margin-bottom:30rpx;
                .content{position: relative;flex:1;}
                &+.item{
                    padding-top:30rpx;
                    .content{
                        &::before{
                            content:'';position:absolute;top:-30rpx;left:0;width: 100%;height:1rpx;background:$border-color;
                        }
                    }
                }
            }
            .avatar{margin-right:30rpx;}
            .name{font-size:34rpx;font-weight:bold;margin-bottom:20rpx;}
            .text{margin-bottom:20rpx;font-size: 30rpx;;}
            .imgs{
                .u-col{margin-top:8px;}
            }
            .comment{
                display: flex;justify-content: space-between;align-items:center;margin-top:20rpx;color:$grey9;
                .btns{
                    display: flex;
                    .btn-item{margin-left:30rpx;display: flex;align-items: center;}
                }
            }
        }
    }
}

.page-creation{
    &-book{
        margin:0 30rpx;
    }
    &-draft{
        .fly-card{
            margin:0 30rpx;
            .item{margin-top:30rpx;border-radius:12rpx;
                .content{margin:0 30rpx 0 0;}
                .title{height:84rpx;margin-bottom:40rpx;}

            }
        }
    }
    &-activity{
        .fly-card{
            margin: 0 30rpx;
            .item{margin-top:30rpx;border-radius:12rpx;
                .title{height:84rpx;margin-bottom:40rpx;}
            }
        }
    }
    &-detail{
        padding:30rpx 0;margin:0 30rpx;
        .article{
            .title{
                align-items: center;
            }
            .content{
                margin-top:40rpx;
            }
            .time{
                padding:30rpx 0;margin-bottom:30rpx;border-bottom: 1rpx solid $border-color;color:$grey9;font-size:26rpx;
            }
        }        
        .comment{
            .fly-card{
                .item{padding-left:0;padding-right:0;}
                .thumb{
                    width:48rpx;height:48rpx;
                }
                .title{
                    font-size:26rpx;color:$grey9;margin-bottom:20rpx;
                }
                .desc{
                    color:$grey6;font-size:26rpx;
                }
                .date{
                    font-size:24rpx;color:$grey9;margin-top:10rpx;
                }
            }
        }
        .fly-bottom-bar{
            .content{border-top:1rpx solid $border-color;}
        }
        .function{
            display: flex;justify-content:space-between;align-items: center;padding:20rpx 30rpx;
            .input{
                width:300rpx;height:56rpx;border-radius:56rpx;background:$bg-color;color:$grey9;padding:0 30rpx;box-sizing: border-box;line-height: 56rpx;
            }
            .btns{
                display: flex;
                .btn-item{margin-left:30rpx;display: flex;align-items: center;}
            }
        }
    }
}

.page-invitation{
    &-list{
        .list{margin:0 30rpx;
            .fly-cell{margin-top:30rpx;border-radius:12rpx;
                .content{border:none;}
                .value{flex:none;}
            }
        }
        .btn-cyan{
            .u-btn{padding:0 40rpx;margin:0;float:right;}
        }
    }
}